<template>
  <div class="content_wrap">
    <div class="result_left">
      <div class="result_left_top">
        <div class="modal_body">
          <div class="control-group" style="margin-right:20px;">
            <div class="controls" style="margin-right:20px">
              <span class="help-inline">当前模型</span>
              <b-form-input disabled v-model="currentDetail.name" size="sm" type="text" placeholder="未获取信息"></b-form-input>
            </div>
          </div>
          <div class="control-group" style="margin-right:20px;">
            <div class="controls" style="margin-right:20px">
              <span class="help-inline">开始时间</span>
              <b-form-input disabled size="sm" v-model="currentModelOperationRecord.createdAt" type="text" placeholder="未获取信息"></b-form-input>
            </div>
          </div>
          <div class="control-group" style="margin-right:20px;">
            <div class="controls" style="margin-right:20px">
              <span class="help-inline">结束时间</span>
              <b-form-input disabled size="sm" v-model="currentModelOperationRecord.updatedAt" type="text" placeholder="未获取信息"></b-form-input>
            </div>
          </div>
        </div>
      </div>
      <div class="result_left_bottom">
        <InfoTable ref="InfoTable" location="operations/search/branch" :param="param" :fixed="true" :filterFields="filterFields">
          <template slot="button-operation">
            <div></div>
          </template>
          <template slot="table-status" slot-scope="row">
            {{row.data.item.status | status}}
          </template>
          <template slot="table-operation" slot-scope="row">
            <b-btn variant="outline-primary" style="margin-right:8px;padding:6px;font-size:0.7rem" @click="showInfo(row.data.item)">详细信息</b-btn>
          </template>
          <template slot="table-status" slot-scope="row">
            {{row.data.item.status | status}}
          </template>
        </InfoTable>
      </div>
    </div>
    <div class="result_right">
      <div class="result_right_body">
        <label style="float:left" for="input-large">输入参数</label>
        <b-form-textarea v-model="currentModelOperationRecord.input" disabled placeholder="未获取信息" :rows="5">
        </b-form-textarea>
      </div>
      <div class="result_right_middle">
        <span class="help_inline" style="float:left">执行结果</span>
        <b-btn class="help_inline" variant="outline-primary" style="float:right;margin-left:10px;padding:5px;font-size:0.7rem" @click="executeModel(currentModelOperationRecord)">重新执行</b-btn>
        <b-btn class="help_inline" variant="outline-primary" style="float:right;margin-left:10px;padding:5px;font-size:0.7rem">详细信息</b-btn>
      </div>
      <div class="result_right_bottom" style="word-wrap:break-word;margin-top:10px;padding:10px;word-break:break-all;overflow:auto">
        {{currentModelOperationRecord.input}}
      </div>
    </div>
  </div>
</template>

<script>
import InfoModal from "@/components/InfoModal";
import InfoTable from "@/components/InfoTable";
import {
  baseURL,
  get,
  save,
  associate,
  getAndAssociate,
  associateByPut,
  remove,
  axios
} from "@/service/api";
// 这个页面不显示得在菜单，而是当其他页面点击[执行历史]、[查看历史]和[查看全部历史]功能时，就会被引导到此网页，不过和[模型历史]不一样的
// 模型历史的页面称为FaultAnticipateModelHistory
export default {
  components: {
    InfoTable,
    InfoModal
  },
  data() {
    return {
      location: "",
      param: "",
      filterFields: ["status"],
      currentDetailKey: -1,
      currentDetail: {
        name: ""
      },
      text: "",
      currentModelOperationRecord: {
        createdAt: "",
        lastModifiedAt: "",
        name: "",
        input: ""
      }
    };
  },
  created() {
    let self = this;
    this.currentDetail = JSON.parse(this.$route.query.entry);
    this.currentDetailKey = parseInt(
      this.getKey(this.currentDetail._links.self.href)
    );
    this.param = "branchId=" + this.currentDetailKey;
  },
  methods: {
    executeModel: async function(currentModelOperationRecord) {
      if (currentModelOperationRecord.name != "") {
        let self = this;
        let record;
        let operationSuccessRecordKey = -1;
        let operation;
        // 根据当前operation获取record
        await get(currentModelOperationRecord._links.record.href)
          .then(response => {
            if (response.status == "200") {
              console.log("资源record获取成功");
              record = response.data;
            }
            console.log(response);
          })
          .catch(error => {
            console.log(error);
          });
        // 操作执行
        await save("models/operation/" + record.modelId, {
          data: currentModelOperationRecord.input
        })
          .then(response => {
            if (response.status == "200") {
              console.log("操作执行成功");
              operationSuccessRecordKey = response.data;
              alert("执行成功");
            }
            console.log(response);
          })
          .catch(error => {
            console.log(error);
          });

        // 获取操作
        await get("operations/" + operationSuccessRecordKey)
          .then(async response => {
            if (response.status == "200") {
              console.log("资源operation获取成功");
              operation = response.data;
            }
            console.log(response);
          })
          .catch(error => {
            console.log(error);
          });
        await associateByPut(
          operation._links.record.href,
          record._links.self.href
        );
      } else {
        alert("请选择操作记录");
      }
    },
    getKey(str) {
      let position = str.lastIndexOf("/");
      return str.substring(position + 1, str.length);
    },
    showInfo(entry) {
      console.log(entry);
      this.currentModelOperationRecord = entry;
    }
  },
  filters: {
    status: function(value) {
      switch (value) {
        case 0:
          return "未知错误";
          break;
        case 1:
          return "正在执行";
          break;
        case 2:
          return "执行成功";
          break;
        case 3:
          return "执行错误";
          break;
        case 4:
          return "未知错误";
          break;
      }
    }
  }
};
</script>

<style>
div.content_wrap {
  width: 100%;
  height: 100%;
}
.result_left {
  float: left;
  width: 40%;
  height: 100%;
  text-align: left;
  background: #f2f2f2;
  z-index: 100%;
}
.result_left_top {
  border-bottom: solid 1px #dddddd;
}
.result_left_bottom {
  margin-top: 20px;
  padding-left: 10px;
  padding-right: 10px;
}
.result_right {
  float: left;
  width: 56%;
  padding-left: 2%;
  padding-right: 2%;
  height: 100%;
  background: #f2f2f2;
  margin-left: -1px;
  border-left: solid 1px #dddddd;
}
.result_right_body {
  margin-top: 20px;
  height: 160px;
}
.result_right_middle {
  height: 50px;
}
.result_right_bottom {
  width: 100%;
  height: 400px;
  background: #ffffff;
  border-radius: 10px;
  border: solid 1px #dddddd;
  margin-left: 5px;
  text-align: left;
}
.modal_body {
  position: relative;
  max-height: 400px;
  padding: 15px;
  overflow-y: auto;
}
.help_inline {
  display: inline-block;
  padding-left: 5px;
  margin-top: 15px;
  vertical-align: middle;
}
</style>
